import { Space, Switch, Table, Button, Row, Col, Modal } from "antd";
import React, { useState, useEffect } from "react";
import CateForm from "./components/CateForm";
import { cateGet, catePut } from "../../api/course";
import { useSelector } from "react-redux";
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

const Category = () => {
  const { role } = useSelector(({ user }) => user.userInfo);
  const columns = [
    //表格配置项
    {
      title: "分类ID",
      dataIndex: "objectId",
      key: "objectId",
    },
    {
      title: "分类名称",
      dataIndex: "catename",
      key: "catename",
    },
    {
      title: "商品数量",
      dataIndex: "goodsnum",
      key: "goodsnum",
    },
    {
      title: "显示状态",
      dataIndex: "isshow",
      key: "isshow",
      render: (bool, record, index) => {
        console.log(bool, record, index);
        return (
          <Switch
            checkedChildren="上架"
            unCheckedChildren="下架"
            checked={bool}
            onChange={() => {
              handleChange(record, index);
            }}
          />
        );
      },
    },
    {
      title: "操作",
      width: "30%",
      render: () => {
        return (
          <Space>
            <Button type="primary" size="small">
              编辑分类
            </Button>
            {role === "root" ? (
              <Button type="primary" size="small" danger>
                删除
              </Button>
            ) : (
              ""
            )}
          </Space>
        );
      },
    },
  ];
  const [checkStrictly, setCheckStrictly] = useState(false);
  const [isOpen, setOpen] = useState(false);
  const [data, setData] = useState([]); //表格数据包

  useEffect(() => {
    cateGet().then((res) => {
      let { results } = res.data;
      let list = results.filter((item) => item.father[0] == "100");
      for (let i = 0; i < results.length; i++) {
        //将数据包整理为多层表格列表数据
        let id = results[i].father[0];
        for (let j = 0; j < list.length; j++) {
          if (list[j].objectId == id) {
            let child = list[j].children ? list[j].children : [];
            list[j].children = [...child, results[i]];
            break;
          }
        }
      }
      // console.log(list);
      setData(list);
    });
  }, []);
  const handleChange = (record, index) => {
    //分类上架状态
    let { father } = record;
    let isshow;
    if (father[0] === "100") {
      isshow = !data[index].isshow;
      data[index].isshow = isshow;
    } else {
      for (let i = 0; i < data.length; i++) {
        if (data[i].objectId === father[0]) {
          isshow = !data[i].children[index].isshow;
          data[i].children[index].isshow = isshow;
          break;
        }
      }
    }
    catePut(record.objectId, { isshow }).then((res) => {
      setData([...data]);
    });
  };
  const handleCateAdd = (cateObj) => {
    setOpen(false);
    let { father } = cateObj;
    if (father[0] == "100") {
      //新增主分类
      data.push(cateObj);
    } else {
      for (let i = 0; i < data.length; i++) {
        //新增子分类
        if (data[i].objectId == father[0]) {
          let child = data[i].children ? data[i].children : [];
          data[i].children = [...child, cateObj];
          break;
        }
      }
    }
    setData(data);
  };
  return (
    <>
      <Row justify="end">
        <Col>
          <Button
            type="primary"
            onClick={() => {
              setOpen(true);
            }}
          >
            新增分类
          </Button>
        </Col>
      </Row>
      <Modal title="新增课程类目" open={isOpen} footer={null}>
        <CateForm handleCateAdd={handleCateAdd} catelist={data} />
      </Modal>
      <Table
        columns={columns}
        rowSelection={{ ...rowSelection, checkStrictly }}
        dataSource={[...data]}
        rowKey="objectId"
      />
    </>
  );
};

export default Category;
